<template>
	<view>
		<com-popup direction="bottom" :visible="visible" @hide="hide">
			<view class="dev-tools y-flex" :style="{'background-color': skinColor.color_bg_2}" @touchmove.stop.prevent>
				<com-tabs-list
				:current.sync="current"
				:bg-color="skinColor.color_bg_1"
				:text-color="skinColor.color_1"
				:border-color="skinColor.color_gap_1"
				:data="tabs">
					<template #right>
						<com-icon name="delete" size="40rpx" :color="skinColor.color_3" @click="clear"></com-icon>
					</template>
					<template v-slot="{tab, i}">
						<list :bounce="false" class="y-flex-1" v-if="i == 0">
							<cell v-for="(item, index) in logs">
								<view class="y-flex pt-20 pb-20 page-padding-gap border-bottom-1" :style="{'border-bottom-color': skinColor.color_gap_1, 'background-color': skinColor.color_bg_1}">
									<view class="y-flex y-row y-align-center" @tap="showMoreLog(index)">
										<com-icon v-if="item.result" class="mr-10" name="attention" size="30rpx" :color="skinColor.color_1"
										@click="resultShow($event, index)"></com-icon>
										<com-icon class="mr-10" name="play_fill" size="30rpx"
										:style="{'transform': 'rotateZ(' + (logMoreShow.indexOf(index) > -1 ? 90 : 0) + 'deg)'}"
										:color="item.type == 'error' ? skinColor.color_red : skinColor.color_1"></com-icon>
										<text class="fs-24 y-flex-1 mr-10 lines-1" :style="{color: item.type == 'error' ? skinColor.color_red : skinColor.color_3}">{{item.message}}</text>
										<text class="fs-20 text-underline" :style="{color: skinColor.color_blue}">{{item.by}}</text>
									</view>
									<text class="fs-24 mt-10" :style="{color: item.type == 'error' ? skinColor.color_red : skinColor.color_3}" v-if="logMoreShow.indexOf(index) > -1">
										{{item.message}}
									</text>
								</view>
							</cell>
						</list>
						<list :bounce="false" class="y-flex-1" v-if="i == 1">
							<header>
								<view class="y-flex y-row y-align-centerpage-padding-gap border-bottom-1"
								:style="{'border-bottom-color': skinColor.color_gap_1, 'background-color': skinColor.color_bg_1}">
									<text class="fs-20 y-flex-1 border-right-1 ml-10 pt-20 pb-20 lines-1"
									:style="{color: skinColor.color_1, 'border-right-color': skinColor.color_gap_1}">名称</text>
									<text class="network-after fs-20 pt-20 pb-20 ml-10 border-right-1"
									:style="{color: skinColor.color_1, 'border-right-color': skinColor.color_gap_1}">方式</text>
									<text class="network-after fs-20 pt-20 pb-20 ml-10 border-right-1"
									:style="{color: skinColor.color_1, 'border-right-color': skinColor.color_gap_1}">缓存</text>
									<text class="network-after fs-20 pt-20 pb-20 ml-10 border-right-1"
									:style="{color: skinColor.color_1, 'border-right-color': skinColor.color_gap_1}">状态</text>
									<text class="network-after fs-20 pt-20 pb-20 ml-10" :style="{color: skinColor.color_1}">类型</text>
								</view>
							</header>
							<cell v-for="(item, index) in nets">
								<view class="y-flex y-row y-align-centerpage-padding-gap border-bottom-1 opac-actived"
								:style="{'border-bottom-color': skinColor.color_gap_1, 'background-color': skinColor.color_bg_1}"
								@tap="showMoreNet(index)">
									<view class="y-flex y-row y-align-center y-flex-1 border-right-1 ml-10 pt-20 pb-20" :style="{'border-right-color': skinColor.color_gap_1}">
										<com-icon :name="item.isWebview ? 'text' : 'link'" :color="skinColor.color_yellow"></com-icon>
										<text class="fs-24 lines-1 ml-10":style="{color: skinColor.color_1}">{{item.url}}</text>
									</view>
									<text class="network-after fs-24 pt-20 pb-20 ml-10 border-right-1"
									:style="{color: skinColor.color_3, 'border-right-color': skinColor.color_gap_1}">{{item.method.toUpperCase()}}</text>
									<text class="network-after fs-24 pt-20 pb-20 ml-10 border-right-1"
									:style="{color: skinColor.color_3, 'border-right-color': skinColor.color_gap_1}">{{item.isCache ? '是' : '否'}}</text>
									<text class="network-after fs-24 pt-20 pb-20 ml-10 border-right-1"
									:style="{
										color: item.status == 200 ? skinColor.color_green : skinColor.color_red,
										'border-right-color': skinColor.color_gap_1
									}">{{item.status}}</text>
									<text class="network-after fs-24 pt-20 pb-20 ml-10" :style="{color: skinColor.color_3}">{{item.type}}</text>
								</view>
							</cell>
						</list>
					</template>
				</com-tabs-list>
			</view>
		</com-popup>
		<com-popup direction="bottom" :visible="resultVisible" @hide="resultHide">
			<view class="dev-tools-child y-flex " :style="{'background-color': skinColor.color_bg_2}" @touchmove.stop.prevent>
				<view class="y-flex y-row y-align-center y-justify-between pt-20 pb-20 page-padding-gap">
					<text class="fs-28" :style="{color: skinColor.color_1}">打印结果</text>
					<com-icon name="close" :color="skinColor.color_2" size="40" weight="bold" @click="resultVisible = false"></com-icon>
				</view>
				<json-editor v-if="typeof result == 'object'" :value="JSON.stringify(result)" mode="view" :theme="skinMode == 'night' ? 'dark' : 'light'"></json-editor>
				<code-reader v-else :text="result" :theme="skinMode == 'night' ? 'dark' : 'light'"></code-reader>
			</view>
		</com-popup>
		<com-popup direction="bottom" :visible="netVisible" @hide="netHide">
			<view class="dev-tools-child y-flex" :style="{'background-color': skinColor.color_bg_2}" @touchmove.stop.prevent>
				<com-tabs
				:bg-color="skinColor.color_bg_1"
				:text-color="skinColor.color_1"
				:border-color="skinColor.color_gap_1"
				:data="netTabs"
				@change="handleNetChange"></com-tabs>
				<list :bounce="false" class="y-flex-1" v-if="netIndex == 0">
					<header>
						<view class="y-flex pt-10 pb-10 page-padding-gap" :style="{'background-color': skinColor.color_gap_1}">
							<text class="fs-24" :style="{color: skinColor.color_1}">常规</text>
						</view>
					</header>
					<cell>
						<view class="y-flex y-row y-align-center pt-10 pb-10 page-padding-gap" :style="{'background-color': skinColor.color_bg_1}">
							<text class="fs-24 y-flex-1 mr-10" :style="{color: skinColor.color_1}">请求网址：</text>
							<text class="fs-24 y-flex-1" :style="{color: skinColor.color_1}">{{netDetail.url}}</text>
							<com-icon name="copy" :color="skinColor.color_3" size="30rpx" @click="copyText(netDetail.url)"></com-icon>
						</view>
						<view class="y-flex y-row y-align-center pt-10 pb-10 page-padding-gap"
						:style="{'background-color': skinColor.color_bg_1}" v-if="netDetail.method">
							<text class="fs-24 y-flex-1 mr-10" :style="{color: skinColor.color_1}">请求方式：</text>
							<text class="fs-24 y-flex-1" :style="{color: skinColor.color_1}">{{netDetail.method.toUpperCase()}}</text>
							<com-icon name="copy" color="rgba(0,0,0,0)" size="30rpx"></com-icon>
						</view>
						<view class="y-flex y-row y-align-center pt-10 pb-10 page-padding-gap"
						:style="{'background-color': skinColor.color_bg_1}" v-if="netDetail.charset">
							<text class="fs-24 y-flex-1 mr-10" :style="{color: skinColor.color_1}">请求格式：</text>
							<text class="fs-24 y-flex-1" :style="{color: skinColor.color_1}">{{netDetail.charset.toUpperCase()}}</text>
							<com-icon name="copy" color="rgba(0,0,0,0)" size="30rpx"></com-icon>
						</view>
						<view class="y-flex y-row y-align-center pt-10 pb-10 page-padding-gap"
						:style="{'background-color': skinColor.color_bg_1}">
							<text class="fs-24 y-flex-1 mr-10" :style="{color: skinColor.color_1}">是否缓存：</text>
							<text class="fs-24 y-flex-1" :style="{color: skinColor.color_1}">{{netDetail.isCache ? '是' : '否'}}</text>
							<com-icon name="copy" color="rgba(0,0,0,0)" size="30rpx"></com-icon>
						</view>
						<view class="y-flex y-row y-align-center pt-10 pb-10 page-padding-gap"
						:style="{'background-color': skinColor.color_bg_1}">
							<text class="fs-24 y-flex-1 mr-10" :style="{color: skinColor.color_1}">开启webview获取：</text>
							<text class="fs-24 y-flex-1" :style="{color: skinColor.color_1}">{{netDetail.isWebview ? '开启' : '关闭'}}</text>
							<com-icon name="copy" color="rgba(0,0,0,0)" size="30rpx"></com-icon>
						</view>
						<view class="y-flex y-row y-align-center pt-10 pb-10 page-padding-gap" :style="{'background-color': skinColor.color_bg_1}">
							<text class="fs-24 y-flex-1 mr-10" :style="{color: skinColor.color_1}">请求代码：</text>
							<view class="y-flex y-flex-1 y-row y-align-center">
								<view style="width: 30rpx;height: 30rpx;border-radius: 30rpx;" :class="{'bg-success': netDetail.status == 200, 'bg-error': netDetail.status != 200}"></view>
								<text class="fs-24 ml-10" :style="{color: skinColor.color_1}">{{netDetail.status}} {{netDetail.status == 200 ? 'OK' : 'ERROR'}}</text>
							</view>
							<com-icon name="copy" color="rgba(0,0,0,0)" size="30rpx"></com-icon>
						</view>
					</cell>
					<header>
						<view class="y-flex pt-10 pb-10 page-padding-gap" :style="{'background-color': skinColor.color_gap_1}">
							<text class="fs-24" :style="{color: skinColor.color_1}">请求头</text>
						</view>
					</header>
					<cell v-for="(key, index) in Object.keys(netDetail.header || {})">
						<view class="y-flex y-row y-align-center pt-10 pb-10 page-padding-gap"
						:style="{'background-color': skinColor.color_bg_1}">
							<text class="fs-24 y-flex-1 mr-10" :style="{color: skinColor.color_1}">{{key}}：</text>
							<text class="fs-24 y-flex-1" :style="{color: skinColor.color_1}">{{netDetail.header[key]}}</text>
							<com-icon name="copy" :color="skinColor.color_3" size="30rpx" @click="copyText(netDetail.header[key])"></com-icon>
						</view>
					</cell>
				</list>
				<list :bounce="false" class="y-flex-1" v-if="netIndex == 1">
					<header>
						<view class="y-flex pt-10 pb-10 page-padding-gap" :style="{'background-color': skinColor.color_gap_1}">
							<text class="fs-24" :style="{color: skinColor.color_1}">字符串参数</text>
						</view>
					</header>
					<cell v-for="(key, index) in Object.keys(netDetail.query || {})">
						<view class="y-flex y-row y-align-center pt-10 pb-10 page-padding-gap"
						:style="{'background-color': skinColor.color_bg_1}">
							<text class="fs-24 y-flex-1 mr-10" :style="{color: skinColor.color_1}">{{key}}：</text>
							<text class="fs-24 y-flex-1" :style="{color: skinColor.color_1}">{{netDetail.query[key]}}</text>
							<com-icon name="copy" :color="skinColor.color_3" size="30rpx" @click="copyText(netDetail.query[key])"></com-icon>
						</view>
					</cell>
					<template>
						<header>
							<view class="y-flex y-row y-align-center pt-10 pb-10 page-padding-gap" :style="{'background-color': skinColor.color_gap_1}">
								<text class="fs-24 y-flex-1" :style="{color: skinColor.color_1}">请求载荷</text>
								<com-icon name="copy" :color="skinColor.color_3" size="30rpx" @click="copyText(JSON.stringify(netDetail.params))"></com-icon>
							</view>
						</header>
						<cell>
							<view class="y-flex y-row y-align-center pt-10 pb-10 page-padding-gap"
							:style="{'background-color': skinColor.color_bg_1}">
								<text class="fs-24 y-flex-1 mr-10" :style="{color: skinColor.color_1}">{{JSON.stringify(netDetail.params)}}</text>
							</view>
						</cell>
					</template>
				</list>
				<view class="y-flex-1" v-if="netIndex == 2">
					<view class="y-flex y-row y-align-center pt-10 pb-10 page-padding-gap" :style="{'background-color': skinColor.color_gap_1}">
						<text class="fs-24 y-flex-1" :style="{color: skinColor.color_1}">响应结果</text>
						<com-icon name="copy" :color="skinColor.color_3" size="30rpx" @click="copyText(typeof responseSync.result == 'object' ? JSON.stringify(responseSync.result) : responseSync.result)"></com-icon>
					</view>
					<template v-if="netVisible">
						<json-editor v-if="typeof netDetail.response == 'object'" :value="JSON.stringify(responseSync)" mode="view" :theme="skinMode == 'night' ? 'dark' : 'light'"></json-editor>
						<code-reader v-else :text="typeof netDetail.response == 'object' ? JSON.stringify(netDetail.response) : netDetail.response" :mode="typeof netDetail.response == 'object' ? 'js' : 'html'" :theme="skinMode == 'night' ? 'dark' : 'light'"></code-reader>
					</template>
				</view>
			</view>
		</com-popup>
	</view>
</template>

<script>
	import SkinColor from '@/assets/skin/index.js'
	import { copyText, typeCall } from '@/assets/js/util.js'
	import JsonEditor from '@/components/model/json-editor/json-editor.vue'
	import CodeReader from '@/components/model/code-reader/code-reader.vue'
	export default {
		components: { JsonEditor, CodeReader },
		computed: {
			skinMode () {
				return this.$store.getters['setting/GET_SKIN_MODE']
			},
			skinColor () {
				return SkinColor[this.skinMode]
			},
			network () {
				return this.$store.getters['network/GET']
			},
			logs () {
				return this.network?.logs || []
			},
			nets () {
				return this.network?.nets || []
			},
			responseSync () {
				return { result: this.netDetail.response || '' }
			}
		},
		data () {
			return {
				visible: false,
				current: 0,
				tabs: [{label: '日志'}, {label: '网络'}],
				resultVisible: false,//展示更多结果
				result: '',//更多结果
				logMoreShow: [],
				netVisible: false,
				netTabs: [{label: '标头'}, {label: '参数'}, {label: '响应'}],
				netIndex: 0,
				netDetail: {}
			}
		},
		methods: {
			copyText (text) {
				const value = ['String', 'Number', 'Boolean'].includes(typeCall(text)) ? text : JSON.stringify(text)
				copyText(value)
			},
			showMoreLog (i) {
				const index = this.logMoreShow.indexOf(i)
				if ( index > -1 ) this.logMoreShow.splice(index, 1)
				else this.logMoreShow.push(i)
			},
			showMoreNet (i) {
				this.netDetail = this.nets[i]
				this.netVisible = true
			},
			show () {
				this.visible = true
			},
			hide () {
				if ( this.resultVisible ) this.resultHide()
				else if ( this.netVisible ) this.netHide()
				else this.visible = false
			},
			resultShow (e, i) {
				e.stopPropagation && e.stopPropagation()
				this.result = this.logs[i].result
				this.resultVisible = true
			},
			resultHide () {
				this.resultVisible = false
				this.result = ''
			},
			netHide () {
				this.netVisible = false
				this.netDetail = {}
			},
			clear () {
				if ( this.current == 0 ) this.network.clearLog()
				else this.network.clearNet()
			},
			handleNetChange (e) {
				this.netIndex = e.current
			}
		}
	}
</script>

<style>
	.dev-tools {
		height: 1000rpx;
	}
	.dev-tools .network-after {
		width: 100rpx;
	}
	.dev-tools-child {
		height: 900rpx;
	}
</style>